<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>SVG Smileys Inline in HTML5</title>
  <style>
svg {
  padding: 0; 
  margin: 0;
}
svg.icon {
  height: 1em;
  width: 1.5em;
}
svg.float {
  float: left;
  margin-right: 20px;
  height: 200px;
  width: 300px;
  border: gray solid;
  border-radius: 50px;
}
body {
  font-size: x-large;
  padding: 0 0.5em;
}
small {
  font-size: small;
  display: inline-block;
}
h1 {
  display: inline-block;
  line-height: 1;
  margin: 0;
}
  </style>
</head>
<body>
<svg height="0" width="0">
  <defs>
    
    <radialGradient id="yellowRad" fx="60%" fy="40%">
      <stop offset="20%" stop-color="yellow" />
      <stop offset="85%" stop-color="gold" />
      <stop offset="95%" stop-color="darkgoldenrod" />
    </radialGradient>
  
    <symbol id="smiley" viewBox="0 0 150 100">
      <g stroke="black">
      <g id="head">
        <circle fill="url(#yellowRad)" cx="50" cy="50" r="40" stroke-width="1.5" />
        <g id="face" fill="none" stroke-linecap="round" stroke-width="7" >
          <line x1="40" x2="40" y1="30" y2="48" />
          <line x1="60" x2="60" y1="30" y2="48" />
          <polyline points="30 60, 40 70, 60 70, 70 60" stroke-width="4"  stroke-linejoin="round" />
        </g>
      </g>
      <g id="hand" transform="translate(115, 60)scale(1.75)" fill="url(#yellowRad)">
        <path d="M 0 0
                 C -3 0, -4 2, -9 -5 
                 S -5 -12, -6 -7
                 C -6 -22, -2 -22, -2 -9
                 C -2 -25, 2 -25, 2 -9
                 C 2 -22, 6 -22, 6 -8
                 C 6 -15, 10 -15, 9 -7
                 S 4 0, 0 0Z"
              >
          <animateTransform id="wave"
                            attributeName="transform" 
                            attributeType="XML"
                            type="rotate"
                            values="0;-8;0;8;0" 
                            dur="1s" 
                            repeatCount="3" 
                            begin="0; mouseover; click;" 
                            restart="whenNotActive" />
        </path>
      </g>
      </g>
    </symbol>
    
  </defs>
</svg>

<svg class="float"><use xlink:href="#smiley"/></svg>
<h1><svg class="icon"><use xlink:href="#smiley"/></svg>Hello!</h1>
<p><svg class="icon"><use xlink:href="#smiley"/></svg>Nice to meet you.
  <small><svg class="icon"><use xlink:href="#smiley"/></svg>Bye now!</small>
</p>
<p>Compare with the original GIF <img src="http://upload.wikimedia.org/wikipedia/commons/e/e2/Bye.gif" />
</body></html>